import { Matrix4, Vector3, Color, OrthographicCamera } from '../../js/three.module.js';
import Poly from '../../js/Poly3.js';
import { initShaders, imgPromise } from '../../js/Utils.js';
import lib from '../../js/ThreeLib.js';

//目前完不成效果
//这个不是很适合做这个效果
//因为在移动的时候
//图片基于原点是弧形移动的
//看起来图片会有扭曲效果

const IpvData = () => ({
    gl: null,
    canvas: null
});

export default class ImagePoorVision {
    constructor(data) {
        Object.assign(this, IpvData(), data);

        this.Camera = null;

        this.lookNode = new Vector3(0, 0, 3);
        this.lookAtNode = new Vector3(0, 0, 0);
        this.upVector = new Vector3(0, 1, 0);

        this.polys = [];
        this.ImageWH = [];//存储image的glWH值

        this.init();
    }

    init() {
        const { gl, polys, ImageWH } = this;
        if (!gl) return;


        Promise.all(this.loadImage()).then((image) => {

            this.createCamera();

            let z = 0;
            image.forEach(u => {

                // w:1920 h:281

                const [maxW, maxH] = [1920, 281];
                const [maxWgl, maxHgl] = [1.0, 0.3];



                const [imgW, imgH] = [u.width, u.height];
                //获取图片壁纸
                //图片的最大高设置为 0.15 最大宽限制为1.0
                let w = (imgW / 2) / (maxW / 2) * maxWgl;
                let h = (imgH / 2) / (maxH / 2) * maxHgl;

                z += 0.6;
                let arr = [
                    -w, -h, -z, 0, 0,
                    -w, h, -z, 0, 1,
                    w, -h, -z, 1, 0,
                    w, h, -z, 1, 1
                ];
                // console.log(imgW, imgH)
                console.log(w, h);

                let poly = this.createPoly(arr);
                polys.push(poly);
                ImageWH.push(w, h);

                poly.texture = {
                    'u_Sampler': {
                        image: u,
                        WRAP_W: gl.CLAMP_TO_EDGE,
                        WRAP_H: gl.CLAMP_TO_EDGE,
                    },
                };
                poly.updateTexture();

                // console.log(z)
                this.updateCamera(poly, this.lookNode, this.lookAtNode);
            });



            this.draw();
        });
    }

    draw() {
        const { gl, polys } = this;
        lib.clearCanvas(gl, new Color("rgba(255,255,255,1)"), 1);
        polys.forEach(u => {
            // console.log(u)
            u.init();
            u.draw(['TRIANGLE_STRIP']);
        });
    }

    loadImage() {
        let imgs = [];
        for (let i = 4; i <= 4; i++) {
            let img = new Image();
            img.src = `./Images/${i}.webp`;
            imgs.push(imgPromise(img));
            console.log(img.width, img.height)
        }

        return imgs;
    }

    createPoly(arr = []) {
        return new Poly({
            gl: this.gl,
            arr: arr,
            list: [
                { name: 'a_Position', size: 3, beginIndex: 0 },
                { name: 'a_Pin', size: 2, beginIndex: 3 }
            ],
            uniforms: {
                'u_PvM4': {
                    type: 'uniformMatrix4fv',
                    value: new Matrix4().elements
                }
            }
        });;
    }

    createCamera() {
        this.camera = null;
        this.camera = new OrthographicCamera();
    }

    update(x) {
        const { gl, polys, ImageWH, lookNode, lookAtNode } = this;
        //目前先以百分比看看
        //还需要存储最长的长度?
        //这个0.29对每个长度的图片都不同,要想办法给搞定

        polys.forEach((value, index) => {
            var w = ImageWH[index * 2] * x * 0.29;
            this.updateCamera(value, lookNode, new Vector3(w, 0, 0))
            // this.updateCamera(value, new Vector3(-w, 0, 3), lookAtNode);
            console.log(ImageWH[index * 2])
        });
        this.draw();
    }


    updateCamera(poly, eye, target) {
        const { polys } = this;
        let pvM4 = this.getPvMatrix(eye, target);

        // polys.forEach(u => {
        poly.uniforms['u_PvM4'].value = pvM4.elements;
        // });
        this.draw();
    }

    //获取投影矩阵视图
    getPvMatrix(eye, target) {
        const { camera } = this;
        camera.position.copy(eye);
        camera.lookAt(target);
        //考虑到相机纯在父级属性
        //调用这个函数时会把世界坐标系写进相机的matrixWorld(世界坐标)属性里
        camera.updateWorldMatrix(true);

        return new Matrix4()
            .multiplyMatrices(
                camera.projectionMatrix,//摄像机的投影矩阵
                camera.matrixWorldInverse,//投影矩阵的逆矩阵, 因为相机移动与物体相反
            );
    }

}